<template>
    <div class="body">
        <div class="title">
            <span class="iconfont icon-fanhui fanhui"></span>
            <span>评价</span>
        </div>
        <div class="tab">
            <span @click="cur = 0">未评价</span>
            <span @click="cur = 1">已评价</span>
        </div>
        <div class="content">
            <div v-show="cur == 0">
                <ul>
                    <li>
                        <div>
                            <div class="pic">
                                <img src="../assets/image/wq/sp2.png">
                            </div>
                            <div class="const">
                                <p class="const-tit">样子103°人体工学套装</p>
                                <p class="const-des">木色无收纳床头1.8m不可收大床箱 床+床头柜*2</p>
                            </div>
                            <div class="last">
                                <p>
                                    <span>￥</span>
                                    <span>3599.00</span>
                                </p>
                                <p class="goods-num">x1</p>
                                <div class="eva-btn">去评价</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-show="cur == 1">
                广场广场广场广场广场广场广场广场广场广场广场
            </div>
        </div>
    </div>
</template>

<script>
    window.onload = window.onresize = function () {
        document.documentElement.style.fontSize = 37.5 * document.documentElement.clientWidth / 375 + 'px';
    };
    export default {
        name: "evaluate",
        data(){
            return {
                cur:0
            }
        }
    }
</script>

<style scoped lang="less">
    @baseFont:37.5;
    html{
        padding: 0;
        margin: 0;
        font-size: @baseFont*1px;
        background: #f4f4f4;
    }
    .body {
        background: #f4f4f4;
        .px2rem(padding-left, 20);
        .px2rem(padding-right, 20);
    }
    .px2rem(@name,@px){
            @{name}:@px/@baseFont/2*1rem;
    }
    .title{
        text-align: center;
        .px2rem(height,80);
        .px2rem(line-height,80);
        .px2rem(font-size,37.5)
    }
    .fanhui{
        position: absolute;
        .px2rem(left,20)
    }
    .tab{
        .px2rem(font-size,37.5);
        span{
            display: inline-block;
            width: 50%;
            text-align: center;
        };
    }
    .tab{
        .px2rem(margin-bottom,20)
    }
    .content{
        div{
            ul{
                li{
                    div{
                        overflow: hidden;
                        .pic{
                            float: left;
                            img{
                                .px2rem(width,180);
                                .px2rem(height,180)
                            }
                        }
                        .const{
                            float: left;
                            .px2rem(height,180);
                            .px2rem(margin-left,20);
                            .px2rem(width,280);
                            .const-tit{
                                .px2rem(font-size,25);
                                font-weight: bold;
                            }
                            .const-des{
                                color: #a1a1a1;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                .px2rem(font-size,18);
                                .px2rem(margin-top,20)
                            }
                        }
                        .last{
                            float: right;
                            color: #a1a1a1;
                            .px2rem(font-size,25);
                            .goods-num{
                                .px2rem(margin-top,20);
                                float: right;
                            }
                            .eva-btn{
                                .px2rem(margin-top,100);
                                text-align: center;
                                .px2rem(height,50);
                                .px2rem(line-height,50);
                                border: 1px solid #cd5051;
                                color: #cd5051;
                                .px2rem(border-radius,35)
                            }
                        }
                    }

                }
            }
        }
    }
</style>